<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
<script type="text/javascript" src="../vue.min.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=5NWBZ-CRU32-DIXUO-C5OPM-32NNZ-6RFTM"></script>
<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js?v=2.exp&key=5NWBZ-CRU32-DIXUO-C5OPM-32NNZ-6RFTM"></script>
<script src="../dist/qqmap.js"></script>
</head>
<body>
<div id="app">
	<Button type="text" class="media-close" shape="circle" icon="close" @click="fresh">fresh</Button>
			<div>
				<input v-model="detail.address" />
			</div>
			<div>
				<input v-model="detail.longitude"/>
			</div>
			<div>
				<input v-model="detail.latitude"/>
			</div>
			<qqmap ref="map" v-bind:detail="detail"></qqmap>
</div>
<script>
  var vm=new Vue({
    el:'#app',
	data:{
		detail:{
			latitude:0,
			longitude:0,
			address:''
		}
	},
	computed:{
		address1() {
        return this.detail.address;
      }
	},
	watch: {
      address1(val) {
        this.fresh();
      }
    },
    components:{
	  qqmap:qqmap.default
    },
	methods:{
		fresh:function(){
			this.detail.latitude=0;
			this.detail.longitude=0;
			this.$refs.map.init();
		}
	}
  })
</script>
</body>
</html>